<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css对table的修饰</title>

    <style>

        .container{
            width: 960px;
            height: 400px;
            background-color: greenyellow;
            margin-left: auto;
            margin-right: auto;
            padding: 15px;
        }

         table, tr, td, th {
              border-collapse: collapse;
         }

        .table{
              width: 80%;
              text-align: center;
        }

        .bordered{
            border: 1px solid;
        }

        /*后代选择器*/
        .bordered td,th{
            border: 1px solid;
        }

        /*隔行换色*/
        .strip tbody tr:nth-child(2n+1){ /*2n - 2n+1;  even-odd*/

             background-color: blue;

        }

    </style>
</head>
<body>


<div class="container">

    <table  class="table bordered strip">
        <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        </thead>


        <tbody>

        <tr>
            <td>1</td>
            <td>L</td>
            <td>30</td>
        </tr>

        <tr>
            <td>1</td>
            <td>L</td>
            <td>30</td>
        </tr>

        <tr>
            <td>1</td>
            <td>L</td>
            <td>30</td>
        </tr>

        </tbody>

    </table>

</div>



</body>
</html>